<template>
<div class="home">
<div class="context">
    <div class="c_header">
<div class="c_left">
    <div class="c_item" v-for="item in listDate">
    <div class="avatars">
         <el-avatar shape="square" size="large" :src="item.imgUrl">
             </el-avatar>
             </div>
    <div class="avatars"> 
        <div class="span" @click="btnhead(item.inviteCode)">
          <span>
          <el-link>{{item.inviteTitle}}</el-link>
          </span></div>
        <div class="b"><span>访问量：{{item.num}}</span>
                    <span>创建时间：{{item.bytime}}</span>
        </div>
       
    </div>
    </div>
</div>

<div class="c-right">
<el-card class="box-card">
  <div slot="header"  class="clearfix">
    <span><i class='el-icon-info'></i>论坛公告</span>
    <el-button style="float: right; padding: 3px 0" type="text" @click="gongGao">更多</el-button>
  </div>
  <div v-for="(o ,index) in ListData4" :key="index" class="text item" v-if="index<7">
    <i class='el-icon-connection'></i>
    <el-link type="primary" @click="btnhead(o.inviteCode)">{{ o.inviteTitle }}</el-link>
    <div style="width:100%;height: 1px;
    background: #ccc;"></div>
  </div>
</el-card>
</div>
</div>
<!-- 中间 -->
    <div class="lieb">
    <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane  :label="item.title" :name="item.name" v-for="(item,index) in List" :key="index" >
    <div class="ul" v-for="(a,num) in item.datalist" v-if="num<8">
    <el-avatar class="ul_eav" fit='fill' :size='35' 
    :src="a.imgUrl"></el-avatar>
    <span class="span" @click="btnhead(a.inviteCode)">
      <el-link type="danger"> {{a.inviteTitle}}</el-link>
      </span>
    <div class="li"> 
        <span>浏览：{{a.num}}</span>
        <span>评论：{{a.pinglunNum}}</span>
        <span>时间：{{a.bytime}}4</span>
        </div>
    </div>
    </el-tab-pane>
    
  </el-tabs>
    </div>
    <div class="wrapper">
       <div class="models">
        <div class="models_header">
            <span class="mh_a"><i class='el-icon-question'></i> 问题</span>
            <span class="mh_b" @click="btn1">更多</span>
            <span class="mh_b">提问</span>
        </div>
        <div class="models_content">
        <ul>
            <li v-for="(o,index) in ListData1" :key="index" v-if="index<15">
            <el-avatar shape="square" :size="25" :src="o.imgUrl"></el-avatar>
            <span class="mc_text" @click="btnhead(o.inviteCode)">{{o.inviteTitle}}</span>
            </li>
        </ul>
        </div>
       </div>

        <div class="models">
        <div class="models_header">
            <span class="mh_a"><i class='el-icon-info'></i>思绪</span>
            <span class="mh_b" @click="btn2">更多</span>
        </div>
        <div class="models_content">
        <ul>
            <li v-for="(o,index) in ListData2" :key="index" v-if="index<15">
            <el-avatar shape="square" :size="25" :src="o.imgUrl"></el-avatar>
            <span class="mc_text" @click="btnhead(o.inviteCode)">{{o.inviteTitle}}</span>
            </li>
        </ul>
        </div>
       </div>
 <div class="models">
        <div class="models_header">
            <span class="mh_a"><i class='el-icon-s-promotion'></i>分享</span>
            <span class="mh_b" @click="btn3">更多</span>
        </div>
        <div class="models_content">
        <ul>
            <li v-for="(o,index) in ListData3" :key="index" v-if="index<15">
            <el-avatar shape="square" :size="25" :src="o.imgUrl"></el-avatar>
            <span class="mc_text" @click="btnhead(o.inviteCode)">{{o.inviteTitle}}</span>
            </li>
        </ul>
        </div>
       </div>

    </div>
</div>
<div style="height:100px;"></div>
</div>
</template>
<script>
import API from '@/api/cate.js'
export default {
name:'tu1',
data(){
    return{
        activeName: 'frist',
        List:[{
            title:'最热',
            name:'frist'
        ,datalist:[]},

        {title:'最新',
        name:'five'
        ,datalist:[]}
        
        ],
         squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
            sizeList: ["large", "medium", "small"],
            listDate:[{imgUrl:"http://www.qqtouxiang.com/d/file/tupian/mx/20180821/jizje10gtwvi1.jpg"
            ,inviteTitle:'时间或多或少的就是大就开始打瞌睡家说的就是大家'
            ,num:8000}
            ],
            pageSize:14,
            pageNum:1,
            ListData1:[],
            ListData2:[],
            ListData3:[],
            ListData4:[],
            

    }
},
activated: function() {
    this.getData();
    this.getNew();
    this.getRe();
    this.getGongGao();
        }
,methods:{
    getData(){
        this.loading.startLoading();
        let obj={
                pageNum:this.pageNum,
                pageSize:this.pageSize
        }
        //模块1
         this.$axios
            .post(API.getInvitaList, obj)
            .then(res => {
              if (res.data.responseCode === 200) {   
                //   console.log(res.data.data.list);
                  this.listDate=res.data.data.list;
                //   this.loading.endLoading();
              } else {
                 this.$message.error('查询失败失败');
                //  res.data.data.list
              }
            });
        // 模块2
    
         let obj1={
                pageNum:this.pageNum,
                pageSize:15,
                type:"问题"
        }
        //模块1
         this.$axios
            .post(API.getInvitaList, obj1)
            .then(res => {
              if (res.data.responseCode === 200) {   
                //   console.log(res.data.data.list);
                  this.ListData1=res.data.data.list;
                //   this.loading.endLoading();
              } else {
                 this.$message.error('查询失败失败');
                //  res.data.data.list
              }
            });

             let obj2={
                pageNum:this.pageNum,
                pageSize:15,
                type:"思绪"
        }
        //模块1
         this.$axios
            .post(API.getInvitaList, obj2)
            .then(res => {
              if (res.data.responseCode === 200) {   
                //   console.log(res.data.data.list);
                  this.ListData2=res.data.data.list;
                //   this.loading.endLoading();
              } else {
                 this.$message.error('查询失败失败');
                //  res.data.data.list
              }
            });

             let obj3={
                pageNum:this.pageNum,
                pageSize:15,
                type:"分享"
        }
        //模块1
         this.$axios
            .post(API.getInvitaList, obj3)
            .then(res => {
              if (res.data.responseCode === 200) {   
                //   console.log(res.data.data.list);
                  this.ListData3=res.data.data.list;
                //   this.loading.endLoading();
              } else {
                 this.$message.error('查询失败失败');
                //  res.data.data.list
              }
            });

        this.$axios
            .post(API.getInvitaList,{})
            .then(res => {
              if (res.data.responseCode === 200) {   
                this.List[0].datalist=res.data.data.list;
                this.List[1].datalist=res.data.data.list;
                this.List[0].datalist.sort((a,b)=>{
                return b.pinglunNum - a.pinglunNum;
            });
           
                  this.loading.endLoading();
              } else {
                 this.$message.error('查询失败失败');
                //  res.data.data.list
                 this.loading.endLoading();
              }
            });

    },
    getGongGao(){
      // this.loading.startLoading();
         let obj1={
                type:"公告"
        }
        //模块1
         this.$axios
            .post(API.getInvitaList, obj1)
            .then(res => {
              if (res.data.responseCode === 200) {   
                //   console.log(res.data.data.list);
                this.ListData4=res.data.data.list;
                this.ListData4.sort((a,b)=>{
                let atime=a.bytime;
                let btime=b.bytime;
                let atimes=new Date(atime).getTime();
                let btimes=new Date(btime).getTime();
                return btimes - atimes;
            });
              } else {
                 this.$message.error('查询失败失败!');
                //  res.data.data.list
              }
            });   p
             this.loading.endLoading();
    },
    getNew(){
       this.$axios
            .post(API.getInvitaList,{})
            .then(res => {
              if (res.data.responseCode === 200) {   
                this.List[1].datalist=res.data.data.list;

                this.List[1].datalist.sort((a,b)=>{
                let atime=a.bytime;
                let btime=b.bytime;
                let atimes=new Date(atime).getTime();
                let btimes=new Date(btime).getTime();
                return btimes - atimes;
            });
                  this.loading.endLoading();
              } else {
                 this.$message.error('查询失败失败');
                //  res.data.data.list
                 this.loading.endLoading();
              }
            });
    },
    getRe(){
 this.$axios
            .post(API.getInvitaList,{})
            .then(res => {
              if (res.data.responseCode === 200) {   
                this.List[0].datalist=res.data.data.list;
                this.List[0].datalist.sort((a,b)=>{
                return a.pinglunNum < b.pinglunNum;
            });
                  this.loading.endLoading();
              } else {
                 this.$message.error('查询失败失败');
                //  res.data.data.list
                 this.loading.endLoading();
              }
            });
    },
handleClick(tab, event) { 
    console.log(tab.name);
        console.log(event);
       if (tab.name=='five') {
           this.getNew()
       }else{
          this.getRe()
       }
       
      },
      btnhead(val){
        console.log(val);
        // this.$router.go(0)
        this.$router.replace({path:'/contents',
        query:{
          inviteCode:val
          }})
      },
      gongGao(){
    this.$router.push('/tu6')
      },
      btn1(){
           this.$router.push('/tu2')
      },btn2(){
            this.$router.push('/tu4')
      },btn3(){
           this.$router.push('/tu5')
      }
}
}
</script>

<style scoped>
 .home{
    background-image: url(https://static.hacpai.com/images/holiday/blockchain-bg.png);
    /* background: rgba(204, 204, 204, 0.246); */
    width: 100%;
    height: 700px;
    text-align: center;
    margin: 0 auto;
     overflow: auto;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
.context{
    padding: 20px;
    background: #fff;
    padding-top: 20px;
    width: 80%;
    margin: 0 auto;
}
.c_left{
    float: left;
    width: 70%;
}
.c_header{
    width: 100%;
    height: 380px;
}
.c-right{
    width: 30%;
    float: left;
     right: 0;
}
.c_item{
    width: 50%;
    height: 50px;
    float: left;
}
.avatars{
    height: 50px;
    float: left;
}
.avatars el-avatar{
    padding-top: 10px;
}
.avatars .span{
    height: 50%;
    padding-left: 5px;
    width: 280px;
    text-align: left;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    cursor: pointer;

}
.avatars .b{
    height: 50%;
    color: rgba(12, 47, 245, 0.52);
    padding-left: 5px;
    width: 280px;
    text-align: left;
    font-size: 10px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.ul{
    width: 100%;
    height: 40px;
    line-height: 50px;
    text-align: left;
    border-bottom:  1px solid #ccc;
    padding-top: 10px;
    padding-bottom: 10px
}
.ul .span{
    font-size: 18px;
    padding-left: 10px;
    line-height: 50px; 
    cursor: pointer; 
}
.ul_eav{
    float: left;
}
.ul .li{
    float: right;
    padding-right: 10px;
}
.lieb{
    margin-top: 10px;
    padding-left: 10px;
    width: 99%;
    height: 550px;
    background: rgb(182, 230, 245);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.wrapper {
    width: 100%;
    margin: 0 auto;
    display: flex;
}
.models{
    float: left;
    margin-top: 20px;
    width: 33%;
    /* background: rgba(226, 241, 172, 0.76); */
}
.models_header{
    font-size: 13px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
}
.mh_a{
    padding-left: 20px;
    float: left;
    font-weight: 400;

}
.mh_b{
    padding-right: 20px;
    float: right;
    font-weight: 200;
    color: blue;
     cursor: pointer; 
}
.models_content{
    width: 100%;

}
.models_content ul{
    display: block;
    list-style-type: disc;
}
.models_content ul li{
    /* padding-top: 20px; */
    list-style: none outside none;
    display: flex;
    height: 40px;
    align-items: center;
}

.mc_text{
    width: 300px;
    padding-left: 10px;
    text-align: left;
    font-size: 10px;
     cursor: pointer; 
      overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}


.text {
    cursor: pointer; 
    text-align: left;
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }
.clearfix{
width: 100%;
text-align: left
}
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    background: rgb(242, 245, 212);
    right: 0;
    width: 320px;
  }
</style>
<style>

</style>